<script setup lang="ts">
import { toLine } from '@/utils/index'

const props = defineProps({
  // 显示的图标
  icon: {
    type: String,
    default: 'Bell'
  },
  // 通知数量
  value: {
    type: [String, Number],
    default: ''
  },
  // 最大值
  max: {
    type: Number
  },
  // 是否显示小圆点
  isDot: {
    type: Boolean
  }
})
</script>

<template>
  <el-popover :width="300" trigger="click" popper-class="notification-popper">
    <template #default>
      <slot />
    </template>
    <template #reference>
      <el-badge style="cursor: pointer" :value="value" :max="max" :is-dot="isDot">
        <component :is="`el-icon${toLine(icon)}`" />
      </el-badge>
    </template>
  </el-popover>
</template>

<style lang="scss">
.notification-popper {
  padding: 0 !important;
}
</style>
